<template>
  <div id="main" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      const animationDuration = 1500

      const barName = ['区域A', '区域A', '区域A', '区域A', '区域A']
      const rzData= [35, 40, 65, 30, 45]
      const lzData= [35, 45, 30, 38, 25]

      this.chart.setOption ({
        // backgroundColor: '#fff',
        title: {
          text: '影响分析'
        },
        tooltip: {
          trigger: 'item',
          // show: false,
        },
        color: ['#23cea7', '#FFEC8B', '#00BFFF', '#FF3030'],
        legend: {
          orient: 'vertical',
          x: 120,
          y:180,
          data:['管网漏损','水量计量误差','违章用水', '其他'],

        },
        // radiusAxis: {
        // type: 'category',
        // data: ['a', 'b', 'c', 'd']
        // },

        series: [{
          name: '其他',
          type: 'pie',
          //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
          startAngle: -90,
          hoverAnimation: false,
          tooltip: {
          },
          radius: ["20%", "30%"],
          center: ['35%', '55%'],
          label: {
            normal: {
              show: false,
              position: 'center',
              color: '#fff',
              formatter: function(params) {
                return params.value
              },
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: 100,
            itemStyle: {
              normal: {
                color: "rgba(35,206,167,0)"
              }
            }
          },
            {
              value: 35,
              itemStyle: {
                normal: {
                  color: "rgba(35,206,167,1)"
                }
              }

            },
            {
              value: 65,
              itemStyle: {
                normal: {
                  color: "rgba(35,206,167,0.1)"
                }
              }
            },

          ]
        },


          {
            name: '违章用水',
            type: 'pie',
            startAngle: -90,
            radius: ['35%', '45%'],
            center: ['35%', '55%'],
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 100,
              itemStyle: {
                normal: {
                  color: "rgba(255,236,139,0)"
                }
              }
            },
              {
                value: 45,
                itemStyle: {
                  normal: {
                    color: "rgba(255,236,139,1)"
                  }
                }

              },
              {
                value: 55,
                itemStyle: {
                  normal: {
                    color: "rgba(255,236,139,0.1)"
                  }
                }
              },

            ]
          },

          {
            name: '水量计量误差',
            type: 'pie',
            startAngle: -90,
            hoverAnimation: false,
            radius: ["50%", "60%"],
            center: ['35%', '55%'],
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '10',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 100,
              itemStyle: {
                normal: {
                  color: "rgba(0,191,255,0)"
                }
              }
            },
              {
                value: 50,
                itemStyle: {
                  normal: {
                    color: "rgba(0,191,255,1)"
                  }
                }

              },
              {
                value: 50,
                itemStyle: {
                  normal: {
                    color: "rgba(0,191,255,0.1)"
                  }
                }
              },
            ]
          },

          {
            name: '管网漏损',
            type: 'pie',
            startAngle: -90,
            hoverAnimation: false,
            radius: ["65%", "75%"],
            center: ['35%', '55%'],
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '10',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 100,
              itemStyle: {
                normal: {
                  color: "rgba(255,48,48,0)"
                }
              }
            },
              {
                value: 70,
                itemStyle: {
                  normal: {
                    color: "rgba(255,48,48,1)"
                  }
                }

              },
              {
                value: 30,
                itemStyle: {
                  normal: {
                    color: "rgba(255,48,48,0.1)"
                  }
                }
              },
            ]
          }
        ]
      })
    }
  }
}
</script>

